<template>
    <view>
        <view class="header bg_w">
            <view class="search  p_col_30 p_row_30 u-flex">
                <view class="search_box br_30 u-flex p_row_30 u-flex-1" @click="$x.to('clazz/search')">
                    <view class="search_icon ">
                        <u-icon name="search" color="#999999" size="28"></u-icon>
                    </view>
                    <view class="search_text  f_w_500  u-flex-1 color_9 u-font-26 u-m-l-10" v-if="keyword || cid"
                        @click="$x.to(`clazz/search?keyword=${keyword}`)">
                        <u-tag @close="tagClose" :text="keyword" size="mini" bg-color="rgba(0,0,0,.5)" :closeable="true"
                            mode="dark" />
                    </view>

                </view>
                <view class="u-m-l-20 " @click="toggleSort">
                    <u-icon custom-prefix="custom-icon" :name="sortType?'fenlei':'liebiaoshipailie'" color="#999"
                        size="40"></u-icon>
                </view>
            </view>

            <view class="menu">
                <x-dropdown borderBottom="1" @open="menuOpen" ref="dropdown">
                    <x-dropdown-item :title="active_1.label" :options="options_1" v-model="active_1.value"
                        @change="changeActive"></x-dropdown-item>
                    <x-dropdown-item title="销量" icon=""></x-dropdown-item>
                    <x-dropdown-item title="价格" customIcon="custom-icon" :icon="price_sort.icon"
                        v-model="price_sort.value"></x-dropdown-item>
                    <x-dropdown-item title="筛选" customIcon="custom-icon" icon="shaixuan" >
                    </x-dropdown-item>
                </x-dropdown>
            </view>
        </view>
        
        <view class="body">
            <view class="goods">
                <view class="goods_list " :class="sortType?'u-flex u-flex-wrap u-row-between  p_row_20':''">
                    <view class="goods_item  bg_w " :class="sortType?'w_49 item_height m_b_20 u-m-t-20 br_20 o_hidden':'u-flex b_b_s_1 p_row_30 p_col_20'" v-for="(item,index) in goods_list" :key="index">
                        <view class="goods_img">
                            <u-image v-if="sortType" width="100%"  :src="item.img_url" mode="widthFix"></u-image>
                            <u-image v-else border-radius="20" width="240" height="240" :src="item.img_url" mode="aspectFit"></u-image>
                        </view>
                        <view class="goods_info u-flex-1 " :class="sortType?'p_col_20 p_row_20':'u-m-l-20'">
                            <view class="u-line-2 zhu_color u-font-28">
                                <text selectable>{{item.goods_name}}</text>
                            </view>
                            <view class="u-flex goods_price">
                                <view class="u-font-26 err_color f_w_600">
                                    <text>￥</text>
                                    <text class="u-font-34">{{item.shop_price}}</text>
                                </view>
                                <view class="u-m-l-10 text_del u-font-24 color_9">
                                    <text>￥</text>
                                    <text>{{item.vip_price}}</text>
                                </view>
                            </view>
                            <view class="u-m-t-30">
                                <u-tag text="4人正在拼团中" mode="plain" size="mini"/>
                            </view>
                        </view>
                    </view>
                </view>
            
                <view class="p_col_20">
                    <u-loadmore :status="status" />
                </view>
            </view>
        </view>


        <u-popup v-model="showScreen" mode="right" :closeable="true" border-radius="20" width="80%" >
            <view>出淤泥而不染，濯清涟而不妖</view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                status:"",//加载更多
                showScreen:false,//筛选弹窗
                keyword: "",//搜索关键词
                page: 1,//第几页
                page_count: 0,//总页
                cid: 0,//分类id
                sortType: 1,//横排还是竖排
                //综合筛选
                active_1: {
                    value: 0,
                    label: "综合"
                },
                // 综合的选项
                options_1: [{
                        value: 0,
                        label: "综合"
                    },
                    {
                        value: 1,
                        label: "新品"
                    }, {
                        value: 2,
                        label: "推荐"
                    }
                ],
                // 价格排序
                price_sort: {
                    icon: "paixu2",
                    value: "all"
                },
                goods_list: [{
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳宜适酷(EXCO)记忆棉键盘托 鼠标垫 护腕大号 电脑办公游戏键盘垫腕托手托 可水洗 防滑 太阳",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                    {
                        img_url: "https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/176282/25/12716/356671/60b87d45E07ea3f6e/b3f061486bae9934.jpg!q70.dpg.webp",
                        goods_name: "宜适酷(EXCO)",
                        shop_price: '60.00',
                        vip_price: "54.00",
                    },
                ],
                            
            };
        },
        onLoad(option) {
            this.keyword = option.keyword || ''
        },
        onReachBottom() {
            if(this.page_count > this.page){
                this.page++
            }else{
                this.status = "nomore"
            }
        },
        methods: {
            changeActive(item) {
                console.log(item);
                this.$nextTick(function() {
                    this.active_1 = item
                    this.$forceUpdate()
                })
            },
            menuOpen(index) {
                if (index != 0) {
                    this.$refs.dropdown.close()
                    if (index == 2) {
                        this.price_sort.switch = !this.price_sort.switch
                        if (this.price_sort.switch) {
                            this.price_sort.icon = 'jiantou-xia'
                            this.price_sort.value = 'des'
                        } else {
                            this.price_sort.icon = 'jiantou-shang'
                            this.price_sort.value = 'ase'
                        }
                    }
                    
                    if(index == 3){
                        this.showScreen = true
                    }
                }
            },
            tagClose() {
                this.keyword = ''
                this.$x.to('clazz/search')
            },
            toggleSort() {
                this.sortType = !this.sortType
            }
        },
    };
</script>



<style lang="scss" scope>
    .header {
        .search {
            &_box {
                height: 60rpx;
                background-color: #f6f6f6;
            }
        }
    }
    .body{
        .goods{
            .item_height{
                height: 580rpx;
            }
            &_item{
            }
        }
    }
</style>
